import { createApp } from 'vue'
import store from './store'
import '../node_modules/hidpi-canvas/dist/hidpi-canvas.min.js'
import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/js/bootstrap.js';
import mitt from 'mitt'

// import 'view-ui-plus/dist/styles/viewuiplus.css';
// import { Carousel, CarouselItem } from 'view-ui-plus';
import App from './App.vue'
import './assets/css/base.css'
import './assets/css/util.css'
import router from './router'
import util from './util'
import moment from 'moment'
import elementPlus from 'element-plus'
// 1.图片懒加载（在入口文件添加后，在组件任何地方都可以直接使用把 img 里的:src -> v-lazy）
// npm install vue-lazyload --save
import VueLazyLoad from 'vue-lazyload'
// 注册全局组件
import userLevel from "@/components/userLevel";
import userArriveLevel from "@/components/userArriveLevel";


// 增加的引入
import 'element-plus/dist/index.css'
// fade/zoom 等
// import 'element-plus/lib/theme-chalk/base.css'
// collapse 展开折叠
import { monitorZoom } from "@/util/monitorZoom.js";
//画面自适应
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {
    document.body.style = 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {
    document.body.style = 100 / Number(m);
}

const app = createApp(App)
app.config.globalProperties.$store = store
app.config.globalProperties.$util = util
app.config.globalProperties.$bus = new mitt()
app.config.globalProperties.$moment = moment
app.use(router)
app.use(elementPlus)
// 2.使用懒加载的插件   3.修改img :src -> v-lazy
app.use(VueLazyLoad, {
    // 占位图: 还没加载完，用这个图片代替
    loading: require('./assets/img/toxiangloading.png')
})
app.component('user-level', userLevel)
app.component('user-arrive-level', userArriveLevel)
app.mount('#app')

export default app
